<!-- 查询页面 -->
<template>
	<view class="content">
		<!-- 查询列表数据 -->
		<!-- 顶部搜索框 -->
		<view class="" style="background-color: #fff;display: flex;">
			<view class=""
				style="background-color: #fff;flex: 2;display: flex;align-items: center;padding-left: 20rpx;">
				<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
					v-model="queryParmas.Search.Condition" :localdata="rangeSearchData"
					@change="changeSearchSelect"></uni-data-select>
			</view>
			<view class="" style="flex: 8;">
				<uni-search-bar :placeholder="'请输入'+searchPlaceHolder" style="background-color: #fff;"
					@confirm="searchConfrim" v-model="queryParmas.Search.Keyword" @cancel="cancel" @clear="cancel">
				</uni-search-bar>
			</view>
		</view>
		<view class="" style="background-color: #fff;padding-bottom: 20rpx;padding-top: 20rpx;">
			<view class="customer" style="margin: 0 20rpx;display: flex;align-items: center;">
				<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
				<view v-if="range.length!==0" @click="timeDeletChange" class=""
					style="background-color: #fff;border-radius: 50%;padding: 5rpx 13rpx;margin-left: 20rpx;">
					<uni-icons type="closeempty" size="15"></uni-icons>
				</view>
			</view>
			<view style="color: #27a859;font-weight: bold;text-align: right;padding-top:20rpx;padding-right:30rpx">
				金额总计: ￥{{ util.toThousands(allMoney) }}
			</view>
		</view>

		<view class="indexList">
			<scroll-view class="scroll" style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="lower"
				:show-scrollbar="false">
				<!--  -->
				<view class="indexItem scrollView" v-for="(item,index) in searchListData " :key="index"
					@click="toWebView(item)">
					<view class="scrollTag">
						<image v-if="item.billliststate==2" style="" src="../../static/jushou.png" mode=""></image>
						<image v-if="item.billliststate==3" style="" src="../../static/chayi.png" mode=""></image>
					</view>
					<view class="list">
						单号：{{item.OrderType==1?getReplaceId("B"+item.Id) : getReplaceId("S"+item.Id)}}
					</view>
					<view class="list">
						<text style="">客户: </text>
						<text style="">{{item.cCusName}}</text>
					</view>
					<view class="list" style="display: flex;">
						<view class="">
							<text style="">日期: </text>
							<text>{{item.CreateTime}}</text>
						</view>
					</view>
					<view class="list">
						<text style="margin-right: 10rpx;">地址: </text>
						<text>{{item.cCusAddress || '暂无地址'}}</text>
					</view>
					<view class="list">
						<view class="flexBox">
							<text class="money" style="">金额: <text :class="{'textRed':item.TotalSum<0}">￥<b
										class="b">{{util.toThousands(item.TotalSum)}}</b></text> </text>
							<view>
								<view class="tag">
									<image v-if="item.IsCancel" style="" src="/static/stateIcon/zuof.png" mode="">
									</image>
									<image v-if="item.Type==1" src="/static/shezhang.png" mode=""></image>
									<image v-else src="/static/stateIcon/xians.png" mode=""></image>
								</view>
							</view>
							<view>
								<view class="tag" style="">
									<image v-if="item.billliststate==0" style="" src="/static/stateIcon/daiq.png"
										mode="">
									</image>
									<image v-if="item.billliststate==1" style="" src="/static/stateIcon/qians.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 100rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="searchListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	// 引入工具函数
	import util from '../../util/util.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				util,
				// 搜索框plachoder展位内容
				searchPlaceHolder: "客户",
				range: [],
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				// 列表数据
				searchListData: [],
				// 传递参数
				queryParmas: {
					PageIndex: 1,
					PageRows: 20,
					// 根据时间的倒叙
					SortField: "CreateTime",
					SortType: 'desc',
					Search: {
						StartTime: "",
						EndTime: "",
						Condition: "cCusName",
						// 输入的客户名称
						Keyword: "", //默认今日
						CommpayId: uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "",
					}

				},
				// 总条数
				Total: 0,
				//开始结束时间
				time: [],
				// 下拉搜索条件
				rangeSearchData: [{
						value: 'cCusName',
						text: "客户"
					},
					{
						value: 'cInvName',
						text: "货品"
					},
					{
						value: 'CreatorName',
						text: "业务员"
					},
				],
				allMoney: 0
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/user/user'
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.status = "loading"
			this.searchListData = []
			this.queryParmas.PageIndex = 1
			this.queryParmas.PageRows = 20
			// 重新获取查询数据
			this.getOpenOrderListData()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// 跳转
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/user/user'
			})
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.queryParmas.PageRows * this.queryParmas.PageIndex > this.Total) {
				// 暂停加载  没有更多了
				this.status = "noMore"
				return
			}
			// this.getsearchListData()
		},
		onShow() {
			uni.removeStorageSync('CollectMoneySearch')
			this.status = "loading"
			this.searchListData = []
			this.queryParmas.PageIndex = 1
			this.queryParmas.Search.Keyword = ''
			//判断缓存是否存在。不存在清空，存在赋值
			let search = uni.getStorageSync('indexSearchQueryValue')
			if (search) {
				this.queryParmas.Search = search
			} else {
				this.timeDeletChange();
			}
			// 获取查询开单列表信息
			this.getOpenOrderListData()
		},
		// 格式化千分位 保留两位小数 过滤器
		filters: {
			addZero: function(data) {
				if (!data) {
					return '0.00'
				}
				// console.log('1231', data.toFixed(2));
				return util.toThousands(data)
			}
		},
		methods: {
			// 字符串空格处理
			getReplaceId(data) {
				if (data) {
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 触底
			lower(e) {
				if (this.searchListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.getOpenOrderListData('on')
			},
			// 时间选择
			changeDate(e) {
				this.$set(this.queryParmas.Search, 'StartDate', e[0])
				this.$set(this.queryParmas.Search, 'EndDate', e[1])
				this.status = "loading"
				this.queryParmas.PageIndex = 1
				this.searchListData = []
				this.time = [e[0], e[1]];
				this.getOpenOrderListData()
			},
			// 时间清空
			timeDeletChange() {
				this.range = []
				this.$set(this.queryParmas.Search, 'StartDate', "")
				this.$set(this.queryParmas.Search, 'EndDate', "")
				this.status = "loading"
				this.queryParmas.PageIndex = 1
				this.searchListData = []
				this.getOpenOrderListData()
			},

			// 下拉搜索条件事件
			changeSearchSelect(e) {
				this.queryParmas.Search.Condition = e
				if (e === 'CreatorName') {
					this.searchPlaceHolder = "业务员";
				} else if (e === 'cInvName') {
					this.searchPlaceHolder = "货品";
				} else {
					this.searchPlaceHolder = "客户";
				}
				// 切换后自动清空搜索框内容
				this.queryParmas.Search.Keyword = ""

			},
			// 搜索框确认按钮
			searchConfrim(e) {
				this.status = "loading"
				this.searchListData = []
				this.queryParmas.PageIndex = 1

				this.getOpenOrderListData()
			},
			// 搜索框取消
			cancel() {
				this.status = "loading"
				this.queryParmas.Search.Keyword = ''
				this.queryParmas.PageIndex = 1
				this.searchListData = []
				this.getOpenOrderListData()
			},
			// 去小票页面
			toWebView(obj) {
				uni.navigateTo({
					url: '/pages/webview/webview?Id=' + obj.Id + '&billId=' + obj.billlistId + '&type=1'
				})
			},
			// 获取查询开单列表信息
			getOpenOrderListData(data) {
				if (!(this.queryParmas.Search.StartTime && this.queryParmas.Search.EndTime) && this.time) {
					this.queryParmas.Search.StartTime = this.time[0]
					this.queryParmas.Search.StartTime = this.time[1]
				}
				//查询时加条件缓存
				uni.setStorage({
					key: 'indexSearchQueryValue',
					data: this.queryParmas.Search
				})
				this.time = null;
				this.status = "loading"
				this.$http('post', '/BO/BIlling/GetBillingData', this.queryParmas).then(res => {
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						this.allMoney = res.MoneyTotal
						if (res.Data == null) res.Data = [];
						res.Data.forEach(item => {
							item.CreateTime = util.formatDate('format', item.CreateTime)
						})

						let lists = res.Data
						if (res.Data.length == 0) {
							this.status = "noMore"
							this.contentText.contentnomore = "今日未开单"
							return
						}
						if (lists.length == 0) {

							// 没有更多了
							this.status = "noMore"
							this.contentText.contentnomore = "今日未开单"
							return
						} else {
							if (this.queryParmas.PageIndex == 1) {
								this.searchListData = lists
								this.queryParmas.PageIndex += 1

							} else {
								this.searchListData = this.searchListData.concat(lists)
								this.queryParmas.PageIndex += 1
								if (this.queryParmas.PageRows * this.queryParmas.PageIndex > this.Total) {
									this.contentText.contentnomore = "没有更多了"
									// 暂停加载  没有更多了
									this.status = "noMore"
									return
								}

							}
							this.contentText.contentnomore = "没有更多了"
							this.status = "noMore"
						}


						uni.stopPullDownRefresh(); //停止刷新
						// 停止架子状态
					} else {
						this.$api.msg(res.Msg)
						// 停止架子状态
						uni.hideLoading();
						this.status = "noMore"
					}

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// 去除uniapp 的scroll滚动条
	/deep/uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
		display: none
	}

	.textRed {
		color: red;
	}

	/* page {
		height: 100%;
		background-image: url(/static/background.png);
		background-size: cover;
		padding-bottom: 180rpx;
	} */
	.flexBox {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding-right: 8px;

		.tag {
			padding-top: 10rpx;

			image {
				width: 100rpx;
				height: 36rpx;
			}
		}

		.money {
			flex: 1;

			.b {
				font-size: 40rpx;
			}
		}

	}

	.tagTop {
		margin-left: 20rpx;
	}

	.content {
		height: 100%;
		width: 100%;
		background-image: url(https://api.yoojet.com/User/20231129/4756278565bb4a4999d32b078a92b912/1729693711886979072.png);
		background-size: cover;
		/* overflow-y: scroll; */
	}

	.content .index-top {
		background-color: #fff;
		width: 100%;
		padding: 15rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}

	.indexButton {
		display: flex;
		justify-content: space-between;
		margin: 0 30rpx;
	}

	.indexButton view {
		padding: 30rpx 80rpx;
		font-size: 40rpx;
		border-radius: 10rpx;
		color: #fff;
		font-weight: bold;
	}

	.content .index-top .index-top-nav {
		display: flex;
		/* 
		justify-content: space-around; */
	}

	.content .index-top .index-top-title {
		color: #0070C5;
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 10rpx;
	}

	.content .index-top .index-top-price {
		display: flex;
		justify-content: space-around;
		padding: 6rpx 10rpx;
		margin-top: 20rpx;
	}

	.content .index-top .index-top-price .top-price-item {
		font-size: 27rpx;
	}

	.content .index-top .index-top-price .top-price-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content .index-top .index-top-nav .nav-title {
		color: #0482D4;
		font-size: 26rpx;
		font-weight: bold;
		padding-left: 10rpx;
		padding-top: 8rpx;
		margin-right: 30rpx;
	}

	.indexList {
		// width: 93%;
		margin: 20rpx 20rpx;
	}

	.active {}

	.indexList {
		// 兼容H5和APP
		/* #ifdef H5 */
		height: calc(100vh - 210px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 155px);
		/* #endif */
	}

	.indexList .scrollView .tag.active1 {
		color: #fff;
		background-color: #0482D4;
		padding: 5rpx 15rpx;
	}

	.indexList .scrollView .tag.active2 {
		color: #fff;
		background-color: brown;
		padding: 5rpx 15rpx;
	}

	.indexList .indexItem {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		align-items: center;
		padding-top: 10rpx;
		width: 100%;
		position: relative;

		.scrollTag {
			position: absolute;
			right: 0;
			top: 0;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.indexList .indexItem .list {
		margin-bottom: 10rpx;
		padding-left: 20rpx;
	}

	.indexItemTop {
		margin-right: 5rpx;
	}

	.indexItemTop .indexItemTopList {
		margin-bottom: 10rpx;
	}

	.content {


		/* 	display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>